<script>
import BodyItem from '@/portal4.1/components/solt/bodyItem.vue'
import VueGridLayout from 'vue-grid-layout'
import { queryAllGuestColumn, queryAllUserColumn } from '@/api/portal/user/column'
import { getToken } from '@/utils/auth'
import { mapGetters } from 'vuex'
const GridLayout = VueGridLayout.GridLayout
const GridItem = VueGridLayout.GridItem
export default {
  name: 'DefaultContent',
  components: { BodyItem, GridItem, GridLayout },
  data() {
    return {
      dataList: [],
      setting: false,
      layoutStyle: {
        height: '672px'
      }
    }
  },
  computed: {
    ...mapGetters(
      ['layout', 'menuId', 'user']
    )
  },
  watch: {
    // 监听菜单ID，用户初始化当前布局下的栏目信息
    menuId(data) {
      this.initMenu(data)
    }
  },
  mounted() {
    this.initMenu(this.menuId)
  },
  methods: {
    resizedEvent(i, newH, newW) {
      this.dataList = this.dataList.map(item => {
        if (item.i === i) {
          item.w = newW
          item.h = newH
        }
        return item
      })
    },
    movedEvent(i, newX, newY) {
      this.dataList = this.dataList.map(item => {
        if (item.i === i) {
          item.x = newX
          item.y = newY
        }
        return item
      })
    },
    async initMenu(data) {
      if (undefined !== data && data !== null) {
        if (getToken()) {
          await queryAllUserColumn({ mid: data }).then(res => {
            const { data } = res
            this.dataList = data
          })
        } else {
          await queryAllGuestColumn({ mid: data }).then(res => {
            const { data } = res
            this.dataList = data
          })
        }
      }
      if (undefined !== this.dataList && this.dataList.length > 0) {
        let item = {}
        this.dataList.forEach(obj => {
          if (item.y === undefined || item.y === null) {
            item = obj
          } else if (obj.y > item.y) {
            item = obj
          }
        })
        let height = ((item.y + item.h) * 40) + ((item.y + item.h - 1) * 10) + 20
        if (height < 672) {
          height = 672
        }
        this.layoutStyle.height = height + 'px'
      }
    }
  }
}
</script>

<template>
  <div class="content-body" :style="layoutStyle">
    <div class="content-grid">
      <grid-layout
        :layout="dataList"
        :col-num="12"
        :row-height="40"
        :auto-size="false"
        :is-draggable="setting"
        :is-resizable="setting"
        :use-css-transforms="true"
        :responsive="false"
        :use-style-cursor="false"
        :vertical-compact="true"
        :margin="[10, 10]"
      >
        <grid-item
          v-for="(item) in dataList"
          :key="item.id"
          :x="item.x"
          :y="item.y"
          :w="item.w"
          :h="item.h"
          :i="item.i"
          :style="{zIndex: item.zd}"
          @resized="resizedEvent"
          @moved="movedEvent"
        >
          <div class="custom-layout-column" style="width: 100%;height: 100%" :class="setting===true?'active':''">
            <body-item :height="item.h" :column="item.id" />
          </div>
        </grid-item>
      </grid-layout>
    </div>
  </div>
</template>

<style scoped>
.content-body {
  min-width: 75rem;
  padding: 0 calc(50% - 40.8rem);
  position: relative;
}
.content-grid {
  width: 100%;
  height: 100%;
}
</style>
